<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>鼠标绘制点线面</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=28b796036f4d1498d5e30f4d1e2af063&plugin=AMap.MouseTool"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .site-spread {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="鼠标绘制区域" id="polygon"/>
</div>
<div class="row site-spread">
    <div class="form-group row">
        <div class="col-sm-4">
            <select class="form-control m-b" name="account">
                <option>江汉区</option>
                <option>武昌区</option>
                <option>洪山区</option>
                <option>江岸区</option>
            </select>
        </div>
        <div class="col-sm-4">
            <select class="form-control m-b" name="account">
                <option>辖区1</option>
                <option>辖区2</option>
                <option>辖区3</option>
                <option>辖区4</option>
            </select>
        </div>
        <div class="col-sm-4">
            <button type="button" class="btn btn-w-m btn-info">确认</button>
        </div>
    </div>

    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>商家分布</h5>
            </div>
            <div class="ibox-content">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>区域</th>
                        <th>注册商户数</th>
                        <th>使用电信宽带</th>
                        <th>电信宽带占比</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>江汉路辖区</td>
                        <td>321</td>
                        <td>110</td>
                        <td>32%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>宽带到期提醒</h5>
            </div>
            <div class="ibox-content">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>商家名称</th>
                        <th>商家地址</th>
                        <th>宽带运营商</th>
                        <th>到期时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>电信营业厅(合作路)</td>
                        <td><a href="map4.html">江汉区合作路23号</a></td>
                        <td>电信</td>
                        <td>2018.07.12</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>


<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [114.295884, 30.586807],
        zoom: 16
    });
    //在地图中添加MouseTool插件
    var mouseTool = new AMap.MouseTool(map);
    AMap.event.addDomListener(document.getElementById('polygon'), 'click', function () {
        mouseTool.polygon();
    }, false);
    var polygonArr = new Array();//多边形覆盖物节点坐标数组
    polygonArr.push([114.294547, 30.588504]);
    polygonArr.push([114.293571, 30.585918]);
    polygonArr.push([114.297787, 30.584375]);
    polygonArr.push([114.29842, 30.588411]);
    var polygon = new AMap.Polygon({
        path: polygonArr,//设置多边形边界路径
        strokeColor: "#FF33FF", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3,    //线宽
        fillColor: "#1791fc", //填充色
        fillOpacity: 0.35//填充透明度
    });
    polygon.setMap(map);
</script>
</body>
</html>